<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="sysdiv">
      <el-row :gutter="12">
        <el-col :span="8" style="width: 310px; text-align: center">
          <el-card shadow="never" style="height: 100px">
            <i class="el-icon-s-order" style="color: lightskyblue"></i>
            <span style="color: gray">今日订单总数</span>
            <div style="font-size: 20px;"><span>{{list.order_sum}}</span></div>
          </el-card>
        </el-col>
        <el-col :span="8" style="width: 310px; text-align: center">
          <el-card shadow="never" style="height: 100px">
            <i class="el-icon-coin" style="color: lightskyblue"></i>
            <span style="color: gray">今日销售总额</span>
            <div style="font-size: 20px;">¥{{list.today_pay_sum}}<span></span></div>
          </el-card>
        </el-col>
        <el-col :span="8" style="width: 310px; text-align: center">
          <el-card shadow="never" style="height: 100px">
            <i class="el-icon-coin" style="color: lightskyblue"></i>
            <span style="color: gray">昨日销售总额</span>
            <div style="font-size: 20px;">¥<span>{{list.yesterday_pay_sum}}</span></div>
          </el-card>
        </el-col>
        <el-col :span="8" style="width: 310px; text-align: center">
          <el-card shadow="never" style="height: 100px">
            <i class="el-icon-s-data" style="color: lightskyblue"></i>
            <span style="color: gray">近7天销售总额</span>
            <div style="font-size: 20px;">¥<span>{{list.week_pay_sum}}</span></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 待处理事务 -->
    <div class="sysdiv">
      <el-card class="box-card" style="width: 1230px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">待处理事务</span>
        </div>
        <el-row :gutter="12">
          <el-col :span="8" style="width: 400px; text-align: center">
            <el-card shadow="never">
              <el-link :underline="false" @click="order()">待付款订单 （<span
                  style="color: red">{{list.dfk_order_sum}}</span>）
              </el-link>
            </el-card>
            <el-card shadow="never">
              <el-link :underline="false" @click="order()">待发货订单 （<span
                  style="color: red">{{list.dfh_order_sum}}</span>）</el-link>
            </el-card>
          </el-col>
          <el-col :span="8" style="width: 400px; text-align: center">
            <el-card shadow="never">
              <el-link :underline="false" @click="order()">已完成订单 （<span
                  style="color: red">{{list.ywc_order_sum}}</span>）</el-link>
            </el-card>
            <el-card shadow="never">
              <el-link :underline="false" @click="order()">已发货订单 （<span
                  style="color: red">{{list.yfh_order_sum}}</span>）</el-link>
            </el-card>
          </el-col>
          <el-col :span="8" style="width: 400px; text-align: center">
            <el-card shadow="never">
              <el-link :underline="false" @click="returnorder()">待处理退货订单 （<span
                  style="color: red">{{list.dclth_order_sum}}</span>）</el-link>
            </el-card>
            <el-card shadow="never">
              <el-link :underline="false" @click="refundorder()">待处理退款申请 （<span
                  style="color: red">{{list.dcltksq_sum}}</span>）</el-link>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 运营快捷入口 -->
    <div class="sysdiv">
      <el-card class="box-card" style="width: 1230px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">运营快捷入口</span>
        </div>
        <div style="text-align: center">
          <el-button icon="el-icon-document-add" style="height: 50px" @click="goodsProperty()">添加商品</el-button>
          <el-button icon="el-icon-document" style="height: 50px" @click="orderlist()">订单列表</el-button>
          <el-button icon="el-icon-s-custom" style="height: 50px" @click="userlist()">用户管理</el-button>
          <el-button icon="el-icon-s-data" style="height: 50px" @click="orderstatistcs()">交易统计</el-button>
          <!-- <el-button icon="el-icon-mobile-phone" style="height: 50px">短信营销</el-button> -->
          <el-button icon="el-icon-s-platform" style="height: 50px" @click="advertisinglist()">广告管理</el-button>
          <!-- <el-button icon="el-icon-star-off" style="height: 50px">专题管理</el-button> -->
          <!-- <el-button icon="el-icon-time" style="height: 50px">秒杀管理</el-button> -->
          <!-- <el-button icon="el-icon-s-shop" style="height: 50px">新品推荐</el-button> -->
        </div>
      </el-card>
    </div>
    <!-- 总览 -->
    <div class="sysdiv">
      <el-row :gutter="16">
        <el-col :span="8" style="width:625px">
          <el-card class="box-card" style="width: 610px">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px;">商品总览</span>
            </div>
            <div style="text-align: center">
              <el-row :gutter="20" style="height: 80px">
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list2.down_sum}}</div>
                  <div class="grid-content bg-purple">已下架</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list2.up_sum}}</div>
                  <div class="grid-content bg-purple">已上架</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list2.alert_sum}}</div>
                  <div class="grid-content bg-purple">库存紧张</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list2.total_sum}}</div>
                  <div class="grid-content bg-purple">全部商品</div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="width:625px">
          <el-card class="box-card" style="width: 610px">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px;">用户总览</span>
            </div>
            <div style="text-align: center">
              <el-row :gutter="20" style="height: 80px">
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list3.today_add_sum}}</div>
                  <div class="grid-content bg-purple">今日新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list3.yesterday_add_sum}}
                  </div>
                  <div class="grid-content bg-purple">昨日新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list3.month_add_sum}}</div>
                  <div class="grid-content bg-purple">本月新增</div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple" style="font-size: 30px; color: red">{{list3.vip_sum}}</div>
                  <div class="grid-content bg-purple">会员总数</div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 订单统计 -->
    <div class="sysdiv">
      <el-card class="box-card" style="width: 1230px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">订单统计</span>
        </div>
        <span>最近七天订单总数</span>
        <div id="ddtb" style="width: 1230px;height:400px;"></div>
      </el-card>
    </div>
    <!-- 销售统计 -->
    <div class="sysdiv">
      <el-card class="box-card" style="width: 1230px">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px;">销售统计</span>
        </div>
        <span>最近七天销售总额</span>
        <div id="xstb" style="width: 1230px;height:400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      list: {},
      list2: {},
      list3: {},
      value1: '',
      value2: '',
      list4: {},
    }
  },
  methods: {
    async orderinfosum () {
      const { data: res } = await this.$http.post("/orders/orderinfosum/findorderinfo")
      this.list = res.data
    },
    async skusum () {
      const { data: res } = await this.$http.get("/goods/sku/findSum")
      this.list2 = res.data
    },
    async usersum () {
      const { data: res } = await this.$http.get("/userpandect/findUserSum")
      this.list3 = res.data
    },
    async Chart () {
      const myChart1 = echarts.init(document.getElementById('ddtb'))
      const myChart2 = echarts.init(document.getElementById('xstb'))
      const { data: res } = await this.$http.get("/orders/order/getsum")
      const option = {
        xAxis: {
          type: 'category',
          data: res.time
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.sum,
          // [820, 932, 901, 934, 1290, 1330, 1320]
          type: 'line',
          smooth: true
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option)
      const option2 = {
        xAxis: {
          type: 'category',
          data: res.time
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: res.paysum,
          type: 'line',
          smooth: true
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2)

    },
    //路由跳转
    order () {
      this.$router.push("/order/order");
    },
    returnorder () {
      this.$router.push("/order/return_order");
    },
    refundorder () {
      this.$router.push("/order/refund_order");
    },
    goodsProperty () {
      this.$router.push("/goods/goods_edit");
    },
    orderlist () {
      this.$router.push("/order/order");
    },
    userlist () {
      this.$router.push("/user/user_list");
    },
    orderstatistcs () {
      this.$router.push("/statistcs/order_statistcs");
    },
    advertisinglist () {
      this.$router.push("/advertising/advertising_list");
    }

  },
  created () {
    this.orderinfosum()
    this.skusum()
    this.usersum()
  },
  mounted () {
    this.Chart()
  }
}
</script>

<style>
.sysdiv {
  padding-bottom: 20px;
}
.bgcolor {
  background-color: gainsboro;
}
</style>